<!--
 * @Author: Redbin
 * @Date: 2022-04-15 18:33:31
 * @LastEditTime: 2023-02-17 15:08:42
 * @LastEditors: asley 1870602550@qq.com
 * @Description:
 * @FilePath: /wisdom-website/components/Sidebar.vue
 * 以诗的格调出场，才对的起你流光溢彩的眼眸
-->
<template>
  <div class="hidden" :class="{ '!block': sideShow }">
    <div
      class="fixed top-2/3 -translate-y-1/2 right-8 flex flex-col side-list rounded-sm z-[99]"
    >
      <div
        v-for="(item, index) in sideList"
        :key="index"
        class="side-item bg-[#1393FF] w-12 h-12 md:w-16 md:h-16 flex-center flex-col"
        :class="{ 'border-t border-[#176ED4]': index !== 0 }"
        @click="handleSide(index)"
        @mouseenter="handleOver(index)"
      >
        <img class="side-icon" :src="item.icon" :alt="item.name" />
        <span class="side-text text-xs mt-1 text-[#fff]">{{ item.name }}</span>
      </div>
    </div>

    <div
      class="border hidden rounded border-[#F2F2F2] px-12 py-6 bg-white fixed top-2/3 -translate-y-1/2 right-28 z-[999]"
      :class="{ '!block': tooltipShow }"
      @mouseleave="tooltipShow = false"
    >
      <template v-if="sideIndex === 0">
        <!-- <div class="">
          <p class="text-[#666] text-xs">业务洽谈：</p>
          <a  href="tel:18573135331" class="text-[#176ED4] underline">185 7313 5331</a>
        </div> -->
        <div class="mt-4">
          <p class="text-[#666] text-xs">商务热线：</p>
          <a href="tel:18570855995" class="text-[#176ED4] underline">戴经理 18570855995</a><br/>
          <a href="tel:18670725213" class="text-[#176ED4] underline">夏经理 18670725213</a>
        </div>
        <div class="mt-4">
          <p class="text-[#666] text-xs">技术支持：</p>
          <a  href="tel:15367825057" class="text-[#176ED4] underline">小智 15367825057</a>
        </div>
      </template>
      <template v-else-if="sideIndex === 1">
        <img class="w-20 h-20" src="../assets/images/code.jpg" />
        <p class="text-[#666] text-xs">扫码关注公众号</p>
      </template>
      <div class="popper-arrow"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sideShow: true,
      sideList: [
        {
          name: '电话',
          icon: require('~/assets/images/side_phone.png'),
        },
        {
          name: '微信',
          icon: require('~/assets/images/side_wechat.png'),
        },
        {
          name: '客服',
          icon: require('~/assets/images/side_service.png'),
        },
        {
          name: '',
          icon: require('~/assets/images/side_top.png'),
        },
      ],
      tooltipShow: false,
      sideIndex: 0,
      timer: null,
    }
  },
  mounted() {
  },
  methods: {
    getScrollTop() {
      let scrollPos
      if (window.pageYOffset) {
        scrollPos = window.pageYOffset
      } else if (document.compatMode && document.compatMode !== 'BackCompat') {
        scrollPos = document.documentElement.scrollTop
      } else if (document.body) {
        scrollPos = document.body.scrollTop
      }
      return scrollPos
    },
    handleSide(index) {
      if (this.sideIndex !== index) {
        this.tooltipShow = false
      }
      if (index === 0) {
        this.tooltipShow = !this.tooltipShow
      } else if (index === 1) {
        this.tooltipShow = !this.tooltipShow
      } else if (index === 3) {
        const VueScrollTo = require('vue-scrollto')
        VueScrollTo.scrollTo('#header-seat')
      }
      this.sideIndex = index
    },
    handleOver(index) {
      if ([0, 1].includes(index)) {
        this.tooltipShow = true
        this.sideIndex = index
      } else {
        this.tooltipShow = false
      }
    },
  },
}
</script>
<style scoped>
.popper-arrow {
  position: absolute;
  top: 12px;
  right: -18px;
  display: block;
  width: 0;
  height: 0;
  /* margin-right: 3px; */
  border-style: dashed solid dashed dashed;
  border-color: transparent transparent transparent #f2f2f2;
  border-width: 9px;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.73));
}
</style>
